<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/form.css" type="text/css">
  
  <script type="text/javascript" src="js/website/jquery-1.4.2.min.js" ></script>
  <script type="text/javascript" src="js/website/cufon-yui.js"></script>
  <script type="text/javascript" src="js/website/Humanst521_BT_400.font.js"></script>
  <script type="text/javascript" src="js/website/Humanst521_Lt_BT_400.font.js"></script>
  <script type="text/javascript" src="js/website/roundabout.js"></script>
  <script type="text/javascript" src="js/website/roundabout_shapes.js"></script>
  <script type="text/javascript" src="js/website/gallery_init.js"></script>
  <script type="text/javascript" src="js/website/cufon-replace.js"></script>
  
  <script type="text/javascript" src="js/jquery/jquery.validate.js"></script>
  <script type='text/javascript' src='js/jquery/jquery.min.js'></script>
  <script src='js/jquery/jquery-ui.min.js'></script>
  
  <script type="text/javascript">
  
  function validateRegistrationForm() {
		$("#registerForm").validate({
		        rules: {
		          name: {
					required: true
		      	  },

		      	  surname: {
		          	  required: true
		      	  },

		      	  emailAddress : {
			      	  required: true,
			      	  email:true,
			      	  remote: { url:"UserAccount.php", type:"POST", data: {func: "checkEmail"}}
		      	  },
		      	  password1: {
			      	  required:true
		      	  },
				  password2: {
						equalTo:"#password1"
		      	  }
		      	
		      	},

		      	messages: {
					emailAddress : {
						remote : "Email address has already being registered before"
		      		},
		      		password2: {
						equalTo : "Your password does not match"
		      		}
		      	}, //close messages
		
		});
	}
  
  
  </script>
 
</head>

<body>
  <!-- header -->
  <header>
    <div class="container">
    	<h1><a href="index.php">FamTree</a></h1>
      <nav>
        <ul>
          <li><a href="index.php" class="current">Home</a></li>
          <li><a href="#">News</a></li>
        </ul>
      </nav>
    </div>
	</header>
  <div class="main-box">
    <div class="container">
      <div class="inside">
      <div class="wrapper">
      	  <section id="content">
            	<article>
			        <h2>Register <span>Form</span></h2>
			        	<form id="registerForm" method="POST" action="UserAccount.php">
							<div class="form-row">
								<span class="label">Name</span>
								<input type="text" name="name" />
							</div>
							<div class="form-row">
								<span class="label">Surname</span>
								<input type="text" name="surname" />
							</div>
							<div class="form-row">
								<span class="label">Email Address</span>
								<input type="text" name="emailAddress"></input>
							</div>
							<div class="form-row">
								<span class="label">Password</span>
								<input type="password" id="password1" name="password1"></input>
							</div>
							<div class="form-row">
								<span class="label">Re-type Password</span>
								<input type="password" id="password2" name="password2"></input>
							</div>
							<div class="form-row">
								<input class="submit" type="submit" value="Register" onclick="validateRegistrationForm()">
							</div>
							<input type="hidden" name="func" value="registerUser">
						</form>
					</article>
				</section>
		      </div>
		    </div>
		  </div>
  <!-- footer -->
<footer>
    <div class="container">
    	<div class="wrapper">
        <div class="fleft">Copyright - FamTree Pte Ltd</div>
      </div>
    </div>
  </footer>
  <script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
